function show_cartlist() {
    let mySid = []; //保存商品sid
    let myNum = []; //保存商品数量
    let allPri = []; //保存商品总价格

    //初始化全选和初始化结账信息
    function setAllSelected() {
        $(".inputs").prop("checked", true);
        $(".allCheck").prop("checked", true);
        //初始化结账信息
        setLastInfo();
    }
    //设置列表头部 邮乐商品中表示的所有商品数量
    function get_allNum() {
        let temp = 0;
        for (let value of myNum) {
            temp += parseInt(value);
        }
        $(".topOne .ulegoods span").html(temp);
    }

    //获取当前本地存储的商品信息数据
    function get_current_localStorage() {
        if (localStorage.getItem("goodsSid") && localStorage.getItem("goodsNum")) {
            mySid = localStorage.getItem("goodsSid").split(",");
            myNum = localStorage.getItem("goodsNum").split(",");
        }
    }
    //将商品信息数据存入当前本地存储
    function set_current_localStorage() {
        localStorage.setItem("goodsSid", mySid);
        localStorage.setItem("goodsNum", myNum);
    }

    //获取本地的用户信息并且渲染到页面
    function get_username() {
        if (localStorage.getItem("tel")) {
            $(".login_registry").css({ display: "none" });
            let str = "<span>退出</span>";
            $(".showName").html("尊敬的" + localStorage.getItem("tel") + str);
        }
    }
    //渲染的结构 要使用事件委托
    $(".showName").on("click", "span", function() {
        localStorage.removeItem("tel");
        $(".login_registry").css({ display: "inline" });
        $(".showName").html("");
    });
    get_username();
    //初始化的第一次 必须先从本地存储拿数据出来进行渲染
    get_current_localStorage();
    //设置列表头部 邮乐商品中表示的所有商品数量
    get_allNum();
    setAllSelected();

    //初始化购物车列表
    if (localStorage.getItem("goodsSid") && localStorage.getItem("goodsNum")) {
        //将相应的商品sid给后端，通过ajax去后端取数据
        $.ajax({
            url: "http://10.31.157.19/myule/php/alldata.php",
            data: {
                sid: localStorage.getItem("goodsSid")
            },
            dataType: "json",
        }).done(function(myData) {
            for (let i = 0; i < myData.length; i++) {
                //图片结构
                let strImg = `
                    <img src=${myData[i].picurl} style='width:60px;height:60px;margin-right:30px;margin-top:15px;
                    margin-bottom:15px;vertical-align:middle'>
                `;
                let temp = $(".pref:hidden").clone(true, true);

                temp.css({
                    "display": "block",
                    background: "white",

                });
                //图片和标题
                temp.find("p").eq(0).html(strImg + myData[i].title);
                //<!-- 单价 -->
                temp.find("p").eq(1).html('￥' + myData[i].price).css({ fontSize: 15 });
                //数量
                let index = mySid.indexOf(myData[i].sid);
                temp.find("p").eq(2).find(".nums").val(myNum[index]);
                //总价格
                let sum = parseFloat(myData[i].price) * myNum[index];
                temp.find("p").eq(3).html('￥' + sum.toFixed(2)).css({ color: "red", fontSize: 18 });
                allPri.push(sum.toFixed(2));
                $(".showAll").append(temp);
            }
            //初始化自动选择所有商品 并且渲染结账部分的数据
            setAllSelected();
        })
    }

    //初始化以及全选的时候 设置结账信息部分
    function setLastInfo() {
        let sum = 0; //存放总价
        for (let i of allPri) {
            sum += parseFloat(i);
        }
        sum.toFixed(2);
        //渲染数据
        let getNums = $(".topOne .ulegoods span").html(); //存放总数
        $(".allInfo .sumNum").html(getNums + "件");
        $(".allInfo .sumPrice").html("￥" + sum);
    }
    //全选功能 （清空购物车只有在全选的状态下才能执行）
    //点击全选的时候 勾上所有checkbox 并且计算所有商品的总价渲染到最后的信息栏
    $(".allCheck").on("click", function() {
        let temp = $(this).prop("checked");
        $(".inputs").prop("checked", temp);
        $(".allCheck").prop("checked", temp);
        if ($(this).prop("checked")) {
            //初始化结账信息
            setLastInfo();
            //删除所有购物车列表
            //点击清空购物车的时候
            $(".allInfo .clearCartlist").on("click", function() {
                //数据还原
                $(".allInfo .sumNum").html(0 + "件");
                $(".allInfo .sumPrice").html("￥" + 0);
                $(".pref:visible").remove();
                //清空数据
                mySid = []; //保存商品sid
                myNum = []; //保存商品数量
                allPri = []; //保存商品总价格
                //同步本地数据
                set_current_localStorage();
                get_current_localStorage();
                //清空购物车之后 全选按钮置为false
                $(".allCheck").prop("checked", false);
            });
        } else {
            //设置默认数据
            $(".allInfo .sumNum").html(0 + "件");
            $(".allInfo .sumPrice").html("￥" + 0);
            $(".allInfo .sumPrice").html("￥" + 0);
        }
    });




    //部分选中功能 
    //选中的商品 其商品数和价格合计会被 累加到结账信息部分
    //当商品全选中时 全选被触发 没有全选时候 全选不被触发
    $(".oneCheckbox").on("click", function() {
        //获取结帐信息部分商品的总价
        let parent = $(this).parent(".pref");
        //如果商品被选中或取消 就更新底部的总价信息
        if ($(this).prop("checked")) {
            keepSame(parent, "+");
        } else {
            keepSame(parent, "-");
        }
        //判断是否全选
        let flag = true;
        $(".showTop:visible .oneCheckbox").each(function(index, value) {
            if (!$(value).prop("checked")) {
                flag = false;
                return false;
            }
        });
        if (flag) {
            $(".allCheck").prop("checked", true);
        } else {
            $(".allCheck").prop("checked", false);
        }

    });



    //删除功能
    let delIndex = null; //delIndex表示当前被删除的购物车项在列表页的索引位置(我们可以借助它同步操作前面定义的sid和num以及总价等的数组)

    //商品信息变化 底部结账信息保持变化 
    function keepSame(obj, symbol, modify) {
        //参数一 对象 参数二符号 “+”或“-” 参数三 不为空就在原来数据上修改(+1 -1)或 为空加上商品数减去商品数
        //同步结账信息部分的商品数量和总价
        //获取结帐信息部分商品的总价
        let curPrice = parseFloat($(".allInfo .sumPrice").html().substring(1));
        //获取结帐信息部分商品的件数信息
        let str = $(".allInfo .sumNum").html();
        str.substring(0, str.length - 1);
        let curNum = parseInt(str);
        //获取当前商品的 数量和总价
        let addNum = parseInt(obj.find("p:nth-of-type(3)").find(".nums").val());
        let add = parseFloat(obj.find("p:nth-of-type(4)").html().substring(1));
        let singlePri = parseFloat(obj.find("p:nth-of-type(2)").html().substring(1));
        if (modify) {
            addNum = 1;
            if (symbol == "+") {
                curPrice += singlePri;
                curPrice.toFixed(2);
                curNum += addNum;
            } else if (symbol == "-") {
                curPrice -= singlePri;
                curPrice.toFixed(2);
                curNum -= addNum;

            }
        } else {
            if (symbol == "-") {
                curPrice -= add;
                curNum -= addNum;
            } else if (symbol == "+") {
                curPrice += add;
                curNum += addNum;
            }
        }
        $(".allInfo .sumPrice").html("￥" + curPrice.toFixed(2));
        $(".allInfo .sumNum").html(curNum + "件");
    }

    //删除单项购物车订单信息
    function delOneItem(obj) {
        let parent = obj.parent(".pref"); //单个购物车的整体结构
        $(".showAll .pref:visible").each(function(index, element) {
            //如果当前可见的.pref的
            //get()你选择一个实际的DOM 元素并且对他直接操作
            //如果两个dom相等 就记录当前购物车项在所有购物车项里的索引
            if ($(element).get(0) == parent.get(0)) {
                delIndex = index;
                return false;
            }
        });
        console.log(parent.find(".oneCheckbox").prop("checked"));
        if (parent.find(".oneCheckbox").prop("checked")) {
            keepSame(parent, "-");
        }
        //同步操作记录sid和num以及总价的数组
        mySid.splice(delIndex, 1);
        myNum.splice(delIndex, 1);
        allPri.splice(delIndex, 1);
        //商品的sid num等信息发生变化就要存回本地存储 再取出来 从而使得 本地存储信息和当前信息保持一致(实时更新)
        set_current_localStorage();
        get_current_localStorage();
        //设置列表头部 邮乐商品中表示的所有商品数量
        get_allNum();
        // 删除当前购物车项的结构
        parent.remove(".pref");
    }

    //点击触发 删除单个购物车订单
    //利用事件委托 当点击表示删除部分的子元素p的时候删除父元素即当前这项购物车信息  并且修改本地存储的数据 然后再获取本地存储数据(这一步是为了保证数组里的数据和本地存储同步);
    $(".showAll .pref").on("click", "p:nth-of-type(5)", function() {
        delOneItem($(this));
    });

    //删除部分选中商品功能
    $(".clearSelectCartlist").on("click", function() {
        let allInputs = $(".showTop:visible .oneCheckbox");
        allInputs.each(function(index, value) {
            if ($(value).prop("checked")) {
                delOneItem($(value));
            }
        });
        get_allNum();

    });

    //改变商品数量功能
    function changeGoodsNum() {
        let indexx = null;

        function curFatherIndex(obj) { //获取索引
            //获取索引位置
            //通过索引修改数组中的数据并且同步到本地存储
            $(".showTop:visible").each(function(index, value) {
                if ($(value).get(0) === obj.get(0)) {
                    indexx = index - 1;
                }
            });
        }
        //改变商品数量
        function changeNums(ev, obj, symbol) {
            let num = null;
            var ev = ev || window.event;
            let parent = obj.parent();
            let graParent = parent.parent();
            curFatherIndex(graParent); //获取索引
            if (ev.target.nodeName == "BUTTON" && symbol == "-") {
                num = parseInt(obj.next(".nums").val());
                if (num > 1) {
                    num--;
                    obj.next(".nums").val(num);
                    // console.log(obj.next(".nums").val());
                    if (graParent.find(".oneCheckbox").prop("checked")) {
                        keepSame(graParent, "-", "111");
                    }
                    myNum[indexx]--;
                }

            } else if (ev.target.nodeName == "BUTTON" && symbol == "+") {
                num = parseInt(obj.prev(".nums").val());
                num++;
                obj.prev(".nums").val(num);
                if (graParent.find(".oneCheckbox").prop("checked")) {
                    keepSame(graParent, "+", "111");
                }
                myNum[indexx]++;
            }
            //取到单价
            let singlePrice = parseFloat(parent.prev(".singlePrice").html().substring(1));
            parent.next(".lastSums").html("￥" + (singlePrice * num).toFixed(2));
            //同步操作记录sid和num以及总价的数组
            allPri[indexx] = singlePrice * num;
            //商品的sid num等信息发生变化就要存回本地存储 再取出来 从而使得 本地存储信息和当前信息保持一致(实时更新)
            set_current_localStorage();
            get_current_localStorage();
            //设置列表头部 邮乐商品中表示的所有商品数量
            get_allNum();
        }
        //点击减号按钮
        $(".leftbut").on("click", function(ev) {
            changeNums(ev, $(this), "-");
        });
        //点击加号按钮
        $(".rightbut").on("click", function(ev) {
            changeNums(ev, $(this), "+");
        });


        $(".nums").on("input", function(ev) {
            let reg = /^[0-9]+$/;
            if (!reg.test($(this).val()) || $(this).val() === '0') {
                $(this).val(1);
            }
            var ev = ev || window.event;
            let parent = $(this).parent();
            let graParent = parent.parent();
            curFatherIndex(graParent); //获取索引
            let singlePrice = parent.prev(".singlePrice").html().substring(1)
            let curSum = $(this).val() * parseFloat(singlePrice).toFixed(2);
            parseFloat(parent.next(".lastSums").html("￥" + curSum));
            //同步操作记录sid和num以及总价的数组
            let pre = allPri[indexx];
            allPri[indexx] = curSum;
            let str = parseFloat($(".sumPrice").html().substring(1)).toFixed(2);
            $(".sumPrice").html("￥" + (str - pre + curSum).toFixed(2));
            str = $(".sumNum").html();
            console.log(str);
            str = parseInt(str.substring(0, str.length - 1));
            console.log(str);
            str = str - myNum[indexx] + parseInt($(this).val());
            console.log(str);
            myNum[indexx] = parseInt($(this).val()); //设置回去
            $(".sumNum").html(parseInt(str) + "件");
            //商品的sid num等信息发生变化就要存回本地存储 再取出来 从而使得 本地存储信息和当前信息保持一致(实时更新)
            set_current_localStorage();
            get_current_localStorage();
            //设置列表头部 邮乐商品中表示的所有商品数量
            get_allNum();
        });
    }
    changeGoodsNum();
}
show_cartlist();